<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>ref React.createRef()</title>
</head>

<body>
    <h1>ref React.createRef()</h1>
    <ol>
        <li>bind方式绑定可以传入形式参数{this.funA.bind(this,"我是参数1")}</li>
        <li>在事件属性上使用{(e)=>this.funA("参数",e)}的方式直接传入参数</li>
        <li>上面的e表示事件对象</li>
    </ol>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    class MyCom extends React.Component {

        constructor(props) {
            super(props)
        }

        // 最后一个参数是事件对象
        funA(i1,i2, e) {
            console.log(i1)
            console.log(i2)
            console.log(e)
        }

        funB = (i1,i2, e) => {
            console.log(i1)
            console.log(i2)
            console.log(e)
        }

        render() {
            return (
                <div>
                    <div>我是一个类组件</div>
                    <button onClick={this.funA.bind(this, "我是参数1","我是参数2")}>bind方式传参</button>
                    <button onClick={(e) => { this.funA("我是参数1","我是参数2",e) }}>箭头函数方式传参和事件对象</button>
                    <button onClick={this.funB}>箭头函数方式传参和事件对象</button>
                </div>
            )
        }
    }

    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById("demoReact"));

    // 渲染组件
    root.render(<MyCom />);
</script>

</html>